<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="编程云">
    <meta name="description" content="编程云">
    <meta name="robots" content="all">
    <meta name="copyright" content="">
    <meta name="author" content="编程云">
    <title>实验云</title>
    <link rel=stylesheet href="css/codemirror.min.css">
    <link rel="stylesheet" href="CodeMirror/css/style.css" type="text/css">
    <link href="CodeMirror/addon/hint/show-hint.css" rel="stylesheet">
    <link href="CodeMirror/css/bootstrap.min.css" rel="stylesheet">
    <link rel=stylesheet href="css/head.css">
    <link rel="stylesheet" type="text/css" href="CodeMirror/css/mycourse.css">
    <link rel=stylesheet href="CodeMirror/theme/seti.css">
    <!--<link href="css/video-js.css" rel="stylesheet" type="text/css">-->
    <link href="css/code.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="CodeMirror/js/jquery.min.js"></script>
    <script src="CodeMirror/js/bootstrap.min.js"></script>
    <script src="js/artTemplate.js"></script>
    <script src="js/template-native.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script src="CodeMirror/js/Drag.js"></script>
    <script type="text/javascript" src="js/HOST.js"></script>
    <script src="js/main.js"></script>
    <!--<script register-percent="100" src="js/video.js"></script>-->

    <style type="text/css">
        html,body{
            height: 100%;;
            width: 100%;
        }
        .CodeMirror div.CodeMirror-cursor{
            border-left: solid thin #f8f8f0;
        }
        .CodeMirror{
            font-size: 16px;
            height: 100%;
        }
        .code-box{
            position: absolute;
            top: 30px;
            left: 0;
            right: 0;
            bottom: 0;
        }
        #result{
            padding: 10px;
            font-size:16px;
            position: absolute;
            left: 0;
            right: 0;
            top: 30px;
            bottom: 0;
        }
        .CodeMirror div.CodeMirror-cursor{
            border-left: solid thin #f8f8f0;
        }
        .CodeMirror{
            font-size: 16px;
            height: 100%;
        }
        .code-btn,.code-btn:focus,.code-btn:active{
            color: white;
            border: 0;
            background: #3594ff;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 10px;
            outline: none;
        }
    </style>
</head>
<body style="padding: 0;">
    <div id="code_area" class="code" style="width: 60%;height: 100%;">
        <ul class="nav nav-tabs" id="tab_nav">

        </ul>
        <div class="codePlay">
            <a href="javascript:;" title="放大" style="background-color: blue;" onclick="fullUp()"><span id="butten" class="glyphicon glyphicon-fullscreen"></span></a>
            <a href="javascript:;" id="runBtn" title="运行" style="background-color: #1ea362;" onclick="runCode()" data-target="#codeRunModal"><span class="glyphicon glyphicon-play"></span></a>
        </div>
        <div class="code-box">
            <textarea class="showcode" id="code" name="code"></textarea>
        </div>
        <!--<textarea style="font-style: italic" placeholder="请在此输入程序运行中所有需要的数据。" id="inputText"-->
                  <!--onfocus="this.placeholder=''" onblur="this.placeholder='请在此输入程序运行中所有需要的数据。'"></textarea>-->
    </div>
    <div class="result" id="b" data-a="1" style="height: 100%;width: 40%;background-color: white;position: relative;">
        <p class="resultTag">运行结果</p>
        <p id="judge-result" class="hide">PD</p>
        <div class="showresult" id="result" name="result">
            <div id="judge-log" class="markdown" ></div>
            <iframe id="result_iframe" frameborder="0" width="100%" height="100%"></iframe>
        </div>
    </div>
    <div style="clear: both"></div>
    <div class="modal fade" id="codeRunModal" tabindex="-1" role="dialog" aria-labelledby="codeRunModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h5 class="modal-title" id="codeRunModalLabel">运行</h5>
                </div>
                <div class="modal-body">
                    <textarea rows="6" class="form-control" id="subInput" placeholder="如需输入数据,请在此输入"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="runCodeWithInput()" class="code-btn" style="background: #1ea362;">提交</button>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript" src="js/answer.js"></script>
<script type="text/javascript">
    $.getScript('js/highlight.min.js', function() {
        $('code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    });
    function changeUp(){
        $("#butten").removeClass("glyphicon-fullscreen");
        $("#butten").addClass("glyphicon-resize-small");
    }
    function changeDown(){
        $("#butten").addClass("glyphicon-fullscreen");
        $("#butten").removeClass("glyphicon-resize-small");
    }
    function fullUp(){
        window.parent.Show();
    }
</script>
</body>

</html>